import "package:flutter/material.dart";

class MovieCard {
  String title; //标题
  String subTitle; //副标题
  String cover; //封面
  double? progress; //进度 0-100 有进度则会显示播放进度条
  int? episodes; //集数
  bool? showEpisodes; //是否显示集数
  MovieCard({
    required this.title,
    required this.subTitle,
    required this.cover,
    this.progress = 0,
    this.episodes = 0,
    this.showEpisodes = false,
  });
}

// 卡片大小
enum CardSize {
  small, //容纳 3.5个
  large, //容纳 2.5个
}

double getTextHeight(String text, TextStyle style, double maxWidth) {
  final TextPainter textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      textDirection: TextDirection.ltr,
      maxLines: null)
    ..layout(maxWidth: maxWidth);

  return textPainter.height;
}

// 电影卡片列表
class MovieCardList extends StatelessWidget {
  final List<MovieCard> cardList;
  final CardSize size;
  final bool showSubTitle;
  final Color titleColor;
  const MovieCardList({
    super.key,
    required this.cardList,
    this.size = CardSize.small,
    this.showSubTitle = true,
    this.titleColor = const Color(0xff1c1c1c),
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      double maxWidth = constraints.maxWidth;
      double cardWidth =
          size == CardSize.small ? maxWidth / 3.65 : maxWidth / 2.55;
      double cardHeight = cardWidth * 4 / 3;
      // 标题文字样式
      TextStyle titleTextStyle = TextStyle(
        fontSize: 14,
        color: titleColor,
        height: 1.2,
      );
      TextStyle subTitleTextStyle = const TextStyle(
        fontSize: 12,
        color: Color(0xff8a8a8b),
        height: 1.4,
      );
      // 计算标题高度
      double titleHeight = getTextHeight('标题', titleTextStyle, cardWidth);
      double subTitleHeight =
          showSubTitle ? getTextHeight('副标题', subTitleTextStyle, cardWidth) : 0;
      const double padding = 6; //卡片底部内边距
      const double paddingBottom = 14; //列表底部内边距
      double listHeight = cardHeight + titleHeight + subTitleHeight + padding;

      return Container(
        height: listHeight,
        margin: const EdgeInsets.only(bottom: paddingBottom),
        decoration: const BoxDecoration(),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: cardList.length,
          itemBuilder: (BuildContext context, int index) {
            MovieCard cardItem = cardList[index];
            // 是否显示底部集数或进度条
            bool showBottom =
                cardItem.showEpisodes! && cardItem.episodes! > 0 ||
                    cardItem.progress! > 0;
            return Container(
              width: cardWidth,
              margin: EdgeInsets.only(
                left: index == 0 ? 12 : 0,
                right: index == cardList.length - 1 ? 12 : 9,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: padding),
                    child: AspectRatio(
                      aspectRatio: 3 / 4,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(6),
                        child: Container(
                          alignment: Alignment.bottomRight,
                          width: cardWidth,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                          ),
                          child: Stack(
                            alignment: Alignment.bottomRight,
                            children: [
                              Image.asset(
                                cardList[index].cover,
                                fit: BoxFit.cover,
                                width: double.infinity,
                                height: double.infinity,
                              ),
                              showBottom
                                  ? Container(
                                      width: double.infinity,
                                      height: 50,
                                      decoration: const BoxDecoration(
                                        gradient: LinearGradient(
                                            begin: Alignment.bottomCenter,
                                            end: Alignment.topCenter,
                                            colors: [
                                              Color.fromARGB(150, 0, 0, 0),
                                              Color.fromARGB(100, 0, 0, 0),
                                              Color.fromARGB(50, 0, 0, 0),
                                              Color.fromARGB(0, 0, 0, 0),
                                            ]),
                                      ),
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.end,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.stretch,
                                        children: [
                                          Container(
                                            alignment: Alignment.bottomRight,
                                            padding: const EdgeInsets.only(
                                              left: 4,
                                              right: 4,
                                              bottom: 4,
                                            ),
                                            child: (cardItem.showEpisodes! &&
                                                    cardItem.episodes! > 0)
                                                ? Text(
                                                    '共${cardItem.episodes}集',
                                                    style: const TextStyle(
                                                      fontSize: 10,
                                                      color: Colors.white,
                                                    ),
                                                  )
                                                : const SizedBox.shrink(),
                                          ),
                                          cardItem.progress! > 0
                                              ? Container(
                                                  width: double.infinity,
                                                  height: 2,
                                                  margin:
                                                      const EdgeInsets.fromLTRB(
                                                          4, 0, 4, 4),
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            1),
                                                    color: Colors.white54,
                                                  ),
                                                  child: Stack(
                                                    alignment:
                                                        Alignment.centerLeft,
                                                    children: [
                                                      LayoutBuilder(builder:
                                                          (BuildContext content,
                                                              BoxConstraints
                                                                  constraints) {
                                                        return Container(
                                                          height:
                                                              double.infinity,
                                                          width: constraints
                                                                  .maxWidth *
                                                              cardList[index]
                                                                  .progress! /
                                                              100,
                                                          color: Colors.white,
                                                        );
                                                      }),
                                                    ],
                                                  ),
                                                )
                                              : const SizedBox.shrink(),
                                        ],
                                      ),
                                    )
                                  : const SizedBox.shrink(),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  Text(
                    cardList[index].title,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    style: titleTextStyle,
                  ),
                  showSubTitle
                      ? Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Expanded(
                              child: Text(
                                cardList[index].subTitle,
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                                style: subTitleTextStyle,
                              ),
                            ),
                            size == CardSize.small
                                ? const SizedBox.shrink()
                                : const Icon(
                                    Icons.more_vert,
                                    size: 13,
                                    color: Color(0xff94969a),
                                  ),
                          ],
                        )
                      : const SizedBox.shrink(),
                ],
              ),
            );
          },
        ),
      );
    });
  }
}
